import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Icon, Form, Modal, Upload, message } from 'antd';

import styles from './ImageUploader.less';
import { solo } from '../../../common/solo';

import { wrapFileList } from '../../../utils/utils';

import BigImageDisplayer from './BigImageDisplayer';
import BigImageUploading from './BigImageUploading';

@Form.create()
export default class ImageUploader extends React.Component {
  constructor(props) {
    super(props);
  }

  state = {
    title: '',
    uploadData: {
      projectId: '', //业务ID
      customerId: '', //客户ID
      attachType: '', //0：图片；1：视频
      attachKind: '', //附近种类
      type: '', //图片类型
    },
    previewVisible: false,
    // uploadButtonChangeState: true,
    fileListName: '',
    fileType: '',
    previewImage: '',
    fileList: [
      // {
      //   uid: -1,
      //   url:'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      // }
    ],
  };
  // fileList = [
  // ]
  componentDidMount() {
    this.setState({
      fieldName: this.props.fieldName,
      fileList: this.props.fileList,
    });
  }

  // handleCancel = () => this.setState({ previewVisible: false });
  // handlePreview = file => {
  //   this.setState({
  //     previewImage: file.url || file.thumbUrl,
  //     previewVisible: true,
  //   });
  // };

  handleChange = info => {
    // console.log("handleChange", info);
    const fileList = wrapFileList(info);
    this.setState({
      fileList: [...fileList],
    });
    this.props.onImageUploaded && this.props.onImageUploaded(this.state.fieldName, fileList);
  };
  // handleRemoveImage = (e) => {
  //   console.log('handleRemoveImage', e);
  //   this.props.onRemoveImage &&
  //     this.props.onRemoveImage(this.state.fieldName, e);
  // };

  handleDeleteImage = e => {
    // console.log('handleDeleteImage', e);
    // console.log('handleDeleteImage before', this.state.fileList);
    const fileList = this.state.fileList.filter(item => item.key != e.key);
    // console.log('handleDeleteImage end', fileList);
    this.setState({
      fileList,
    });
    this.props.onRemoveImage && this.props.onRemoveImage(this.state.fieldName, e);
  };

  beforeUpload = file => {
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/jpg';
    const isJPEG = file.type === 'image/png';
    if (!isJPG && !isPNG && !isJPEG) {
      file.isTypeIncorrect = true;
      message.error('图片格式错误!');
      return false;
    }
    return true;
  };

  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const fieldName = this.props.fieldName ? this.props.fieldName : null;
    const label = this.props.label ? this.props.label : null;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">{label}</div>
      </div>
    );
    const max = this.props.maxCount ? this.props.maxCount : 1;
    const size = this.props.size ? this.props.size : 'normal';
    const className = size == 'small' ? styles.smallUploader : styles.normalUploader;
    const showRemoveIconType = this.props.showRemoveIconType ? true : false;

    const dataProps = {};

    dataProps.data = {
      projectId: '', //业务ID
      customerId: '', //客户ID
      attachType: '0', //0：图片；1：视频
      attachKind: '', //附件种类
      type: '', //图片类型
    };

    if (this.props.attachmentData) {
      dataProps.data = this.props.attachmentData;
    } else {
    }
    // console.log("this.props.attachmentData",this.props.attachmentData)

    return (
      <div className={className}>
        <div className={styles.imageActions}>
          {this.state.fileList.map((itemFile, itemIndex) => {
            if (itemFile.status == 'done') {
              // console.log("itemIndex",itemIndex)
              // console.log("this.state.fileList",this.state.fileList)
              return (
                <BigImageDisplayer
                  key={itemIndex}
                  file={itemFile}
                  fileList={this.state.fileList}
                  itemIndex={itemIndex}
                  size={size}
                  showDeleteIcon={true}
                  onDelete={this.handleDeleteImage}
                />
              );
              //return (<div key={itemIndex}>hohoho</div>);
            } else {
              return <BigImageUploading key={itemIndex} size={size} />;
            }
          })}
        </div>
        <Upload
          name="file"
          listType="picture-card"
          action={solo.uploadImg}
          data={this.props.attachmentData}
          beforeUpload={this.beforeUpload}
          //onPreview={this.handlePreview}
          onChange={this.handleChange}
          //onRemove={this.handleRemoveImage}
          showUploadList={false}
          fileList={fileList}
        >
          {fileList && fileList.length >= max ? null : uploadButton}
        </Upload>

        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img src={previewImage} style={{ width: '100%' }} />
        </Modal>
      </div>
    );
  }
}
